<template>
    <Root ref="ObjElement" :ModelString="ModelString" @EmitEvent="(val) => { emit('onEvent', val) }" />
</template>
<script setup>
import { provide, ref, shallowRef } from 'vue'

import StringVue from './Type/String.vue';
import SelectVue from './Type/Select.vue';
import NumberVue from './Type/Number.vue';
import IntVue from './Type/Int.vue'
import RadioVue from './Type/Radio.vue'
import CheckBox from './Type/CheckBox.vue'

import ObjectVue from './Layout/Object.vue';
import ObjectItem from './Layout/ObjectItem.vue';
import FormItem from './Layout/FormItem.vue'
import FormGroup from './Layout/FormGroup.vue';
import Layout from './Layout/Layout.vue'
import Position from './Layout/Position.vue';
import RowGroup from './Layout/RowGroup.vue';

import ReadOnly from './Type/ReadOnly.vue';
const props = defineProps(['ModelString', 'Option', 'Value']);

// 合并组件扩展
const TemplateMapping = {
    Layout: {
        FormGroup: FormGroup,
        FormItem: FormItem,
        DefaultLayout: Layout,
        Position: Position,
        RowGroup: RowGroup,
    },
    Base: {
        ObjectView: ObjectVue,
        ObjectItem: ObjectItem,
    },
    Type: {
        ReadOnly: ReadOnly,
        Int: IntVue,
        String: StringVue,
        Select: SelectVue,
        Number: NumberVue,
        Radio: RadioVue,
        CheckBox: CheckBox,
    },
}


// 模板绑定
provide('TemplateMapping', TemplateMapping)
const Root = shallowRef();
// 规定默认初始项
Root.value = TemplateMapping.Base.ObjectView

// 双向绑定
const emit = defineEmits([
    'update:modelValue',
    'onEvent'
]);

//  输出、导出数据
const ObjElement = ref();
const GetValue = () => {
    return JSON.parse(JSON.stringify(ObjElement.value.GetValue()));
};
const SetValue = (val) => {
    ObjElement.value.SetValue(val);
};

defineExpose({
    GetValue, SetValue
})

</script>
<style lang="less" scoped></style>